<template>
	<view>
		<!-- 导航栏 -->
		<u-subsection :list="['历史查询','当日查询']" :current="curNow" mode="subsection" @change="sectionChange"></u-subsection>
		<!-- 选择时间（仅0） -->
		<u-cell-group v-show="isShowA">
			<u-cell icon="calendar" title="选取时间范围" :value="timeValue" @click="seleTime"></u-cell>
		</u-cell-group>
		<!-- 选择日期组件（仅0） -->
		<uni-calendar
			ref="calendar"
			:insert="false"
			lunar
			range
			@confirm="confirm"
			 />
		<!-- 点击获取信息按钮（仅0） -->
		<!-- <u-button type="primary" v-show="isShowA" text="点击获取" @click="getList"></u-button> -->
		<!-- 显示数据 -->
		<view class="counts" v-show="false"><text>共有{{countList}}条数据</text></view>
		<view class="cards" v-show="isShowCards">
			<uni-card 
				v-for="(item, index) in (curNow==0?cards:cardsT)"
				:key="index"
				:title="item.MercName=='' ? item.SysName : item.MercName"
				:sub-title="item.TranName"
				:extra="item.JnDateTime"
				:thumbnail="toImgs(item)"
			>
			<!-- :thumbnail="" -->
			<div class="boxmon">
				<div class="monbox1"><text>交易金额<text class="mcolor1">{{item.TranAmt}}</text></text></div>
				<div class="monbox2"><text>交易后卡余额<text class="mcolor2">{{item.CardBalance}}</text></text></div>
			</div>
			</uni-card>
			<!-- Loading条 -->
			<uni-load-more :status="loadings" v-show="isShowLoading"></uni-load-more>
		</view>
		<!-- 没有数据提示 -->
		<u-alert 
			title="o(╥﹏╥)o 在数据库中没能找到您想要的数据~~"
			type = "warning"
			description="试试其他日期呢~"
			showIcon
			center
			v-show="nodata"
		></u-alert>
	</view>
</template>

<script>
	import {mixin} from '../../../mixin.js'
	export default {
		data() {
			return {
				curNow:0,
				isShow:true,//是否显示选取时间和获取按钮
				timeBegin:"",
				timeEnd:"",
				pageindexNow:1,
				pageindexNow2:1,
				isBottomInfo:false,
				isShowCards: this.isShowCardsF,
				loadings:'more',
				isShowLoading:false,
				nodata:false,
				countList:0,
				isShowCount:false,
				imgs:[
					'../../../static/other.png',
					'../../../static/water.png',
					'../../../static/shower.png',
					'../../../static/electric.png'
				],
				cards:[],//curNow 0
				cardsT:[]//curNow 1
			};
		},
		mixins:[mixin],
		watch:{
			curNow(newcurNow, oldcurNow){
				this.nodata = false
				if(newcurNow == 1){
					this.isShowLoading = false
					this.isShowCount = false
					this.cardsT = []
					this.getListCount(1)
					this.getTodyList()
				}
			}
		},
		computed: {
			timeValue(){
				return (this.timeBegin +"—"+ this.timeEnd)
			},
			isShowA(){
				if(this.curNow == 0){
					if(this.isShow == false){
						return false
					}
					return true
				}
			}
		},
		onPullDownRefresh(){
			this.isShowCount = false
			this.resetState()
			uni.stopPullDownRefresh()
			if(this.curNow == 1)
				this.getListCount(1)
		},
		onReachBottom(){
			this.loadings = 'loading'
			if(this.isBottomInfo == true){
				this.loadings = 'noMore'
			}
			else if(this.curNow == 0){
				this.pageindexNow++
				this.getList()
			}
			else if(this.curNow == 1){
				console.log("------8---"+Math.trunc(((Number(this.countList)/10)+1)))
				if((Math.trunc(Number(this.countList)/10)+1) >= this.pageindexNow2){
					this.loadings = 'noMore'
					return 0
				}
					
				this.pageindexNow2++
				this.getTodyList()
			}
			console.log("触底了")
		},
		methods: {
			resetState(){
				this.isBottomInfo = false
				this.isShowLoading = false
				this.nodata = false
				if(this.curNow == 0){
					this.pageindexNow = 1
					this.cards = []
					this.isShow = true
				}else if(this.curNow == 1){
					this.pageindexNow2 = 1
					this.getTodyList()
					
					this.cardsT = []
				}
				
				
			},
			toImgs(e){
				if(e.MercName=='宿舍开水壶')
					return this.imgs[1]
				else if(e.MercName=='学子浴池')
					return this.imgs[2]
				else if(e.MercName=='网上缴电费')
					return this.imgs[3]
				else
					return this.imgs[0]
			},
			sectionChange(index){
				this.curNow = index
				//this.pageindexNow = 1
				
			},
			confirm(e){
				console.log(e)
				if(e.range.before==""||e.range.after==""){
					this.timeBegin = this.getDateymd()
					this.timeEnd = this.timeBegin
				}else if(e.range.before > e.range.after){
					this.timeBegin = e.range.after
					this.timeEnd = e.range.before
				}else{
					this.timeBegin = e.range.before
					this.timeEnd = e.range.after
				}
				this.getList()
			},
			seleTime(){
				this.$refs.calendar.open()
			},
			getDateymd(){
				let date = new Date()
				let nowMonth = date.getMonth() + 1;
				let strDate = date.getDate()
				let seperator = "-"
				if (nowMonth >= 1 && nowMonth <= 9) {
				   nowMonth = "0" + nowMonth
				}
				if (strDate >= 0 && strDate <= 9) {
				   strDate = "0" + strDate
				}
				let nowDate = date.getFullYear() + seperator + nowMonth + seperator + strDate
				return nowDate
			},
			getList(){
				//定义拼接字符串
				const params = {
					begindate:this.timeBegin,
					clienttype:"Android",
					enddate:this.timeEnd,
					iplanetdirectorypro:uni.getStorageSync("msg"),
					pageindex:this.pageindexNow,
					pagesize:"10",
					schoolcode:"ccufe"
				}
				
				console.log("执行了getList")
				this.isShow = false
				this.isShowCards = true
				this.isShowLoading = true
				if(this.isBottomInfo!=true)
				uni.request({
					url:"http://ykt.ccufe.com:8070/Api/Card/GetHistoryTrjn",
					method:"POST",
					header:{
						//'User-Agent':'Dalvik/2.1.0 (Linux; U; Android 12; DBY-W09 Build/HUAWEIDBY-W09)',
						'Cache-Control':'no-cache',
						'Accept':'*/*',
						'Accept-Encoding':'gzip',
						'Connection':'keep-alive',
						//'cookie':'ASP.NET_SessionId=uikvmjwffvfnclwb1kq1dwdx',
						'Content-Type':'application/x-www-form-urlencoded',
						'Content-Length':'166'
					},
					data:{
						begindate:this.timeBegin,
						clienttype:"Android",
						enddate:this.timeEnd,
						iplanetdirectorypro:uni.getStorageSync("msg"),
						pageindex:this.pageindexNow,
						pagesize:"10",
						schoolcode:"ccufe",
						sign:this.getMd5(this.getObjToStr(params))
					},
					success:res=>{
						if(res.data.success==false || res.data.success=='false'){
							uni.showModal({
								content:'未登录或登录已失效',
								showCancel:false,
							})
							return 0
						}
						if(res.data.success=="true" || res.data.success==true){
							if(res.data.obj==null && this.pageindexNow==1){
								this.nodata = true
							}else if(res.data.obj==null){
								uni.showToast({
									title:"没数据了,下拉可重新选择日期",
									position:'bottom'
								})
								this.isShowLoading = true
								this.isBottomInfo = true
								this.loadings = 'noMore'
							}else{
								console.log(res)
								this.isShowLoading = true
								this.getListCount(2)
								this.cards = [...this.cards, ...res.data.obj]
							}
							
						}
					},
					fail:err=>{
						console.log(err)
					},
					complete:e=>{
						console.log(e)
					}
				})
				
			},
			getTodyList(){
				//定义拼接字符串
				const params = {
					clienttype:"Android",
					iplanetdirectorypro:uni.getStorageSync("msg"),
					pageindex:this.pageindexNow2,
					pagesize:"10",
					schoolcode:"ccufe"
				}
				
				uni.request({
					url:"http://ykt.ccufe.com:8070/Api/Card/GetCurrentTrjn",
					method:"POST",
					header:{
						//'User-Agent':'Dalvik/2.1.0 (Linux; U; Android 12; DBY-W09 Build/HUAWEIDBY-W09)',
						'Cache-Control':'no-cache',
						'Accept':'*/*',
						'Accept-Encoding':'gzip',
						'Connection':'keep-alive',
						//'cookie':'ASP.NET_SessionId=uikvmjwffvfnclwb1kq1dwdx',
						'Content-Type':'application/x-www-form-urlencoded',
						'Content-Length':'166'
					},
					data:{
						clienttype:"Android",
						iplanetdirectorypro:uni.getStorageSync("msg"),
						pageindex:this.pageindexNow2,
						pagesize:"10",
						schoolcode:"ccufe",
						sign: this.getMd5(this.getObjToStr(params))
					},
					success:res=>{
						if(res.data.success==false || res.data.success=='false'){
							uni.showModal({
								content:'未登录或登录已失效',
								showCancel:false,
							})
							return 0
						}
						if(res.data.success==true || res.data.success=="true"){
							if(res.data.obj==null && this.pageindexNow2==1){
								this.nodata = true
							}else if(res.data.obj==null){
								uni.showToast({
									title:"没数据了，下拉可重新选择日期",
									position:'bottom'
								})
								this.isShowLoading = true
								this.loadings = 'noMore'
								this.isBottomInfo = true
							}else{
								this.isShowLoading = true
								this.isShowCards = true
								
								this.cardsT = [...this.cardsT, ...res.data.obj]
							}
							//console.log(res)
						}
						
					},
					fail:err=>{
						console.log(err)
					},
					complete:e=>{
						console.log(e)
						console.log(this.pageindexNow2)
					}
					
				})
			},
			getListCount(typee){
				uni.request({
					url:"http://ykt.ccufe.com:8070/Api/Card/GetTrjnCount",
					method:"POST",
					header:{
						//'User-Agent':'Dalvik/2.1.0 (Linux; U; Android 12; DBY-W09 Build/HUAWEIDBY-W09)',
						'Cache-Control':'no-cache',
						'Accept':'*/*',
						'Accept-Encoding':'gzip',
						'Connection':'keep-alive',
						//'cookie':'ASP.NET_SessionId=uikvmjwffvfnclwb1kq1dwdx',
						'Content-Type':'application/x-www-form-urlencoded',
						'Content-Length':'166'
					},
					data:{
						begindate:this.timeBegin,
						clienttype:'Android',
						enddate:this.timeEnd,
						iplanetdirectorypro:uni.getStorageSync("msg"),
						schoolcode:'ccufe',
						type:typee,
						sign:'697a183f74b78c363fe40429d1a66464'
					},
					success:res=>{
						if(res.statusCode="200"){
							this.isShowCount = true
							this.countList = res.data.obj
							if(this.countList < 10)
								this.isShowLoading = false
							console.log(this.countList)
						}
					},
					fail:err=>{
						console.log(err)
					},
					complete:e=>{
						console.log(e)
					}
					
				})
			},
			isIcon(e){
				if(e == "1"){
					return this.icons[1]
				}
			}			
		},
		onLoad() {
			this.timeBegin = this.getDateymd()
			this.timeEnd = this.timeBegin
		}
	}
</script>

<style lang="scss">
	.nav-a{
		position: fixed;
		left: 0;
		top: 0;
	}
	.u-button{
		margin-top: 20rpx;
	}
	.cards{
		.mcolor1{
			color: red;
			margin-left: 15rpx;
			margin-right: 95rpx;
			font-weight: bold;
		}
		.mcolor2{
			color:#9f87ff;
			margin-left: 15rpx;
			font-weight: bold;
		}
	}
	.counts{
		width: 700rpx;
		height: 40rpx;
		font-size: 25rpx;
		margin: 0rpx auto;
		margin-top: 8rpx;
		text-align: center;
		color: #cccd6c;
		
	}
	.boxmon{
		width: 100%;
		display: flex;
		// overflow: hidden;
		.monbox1{
			width: 50%;
		}
		
	}
	
</style>
